<template>
    <div>
        <h1>store全局状态管理效果验证</h1>
        <button @click="gain()">http获取数据</button>
        <p>{{$store.state.userInfo}}</p>
        <test4></test4>
        <hr>
        <br>
        <br>
        <p>getters的使用</p>
        <p>{{$store.getters.getUserInfo_age}}</p>
        <hr>
        <br>
        <br>
        <p>actions的使用（看控制台等待2秒）</p>
        <button @click="aupdateInfo">异步修改</button>



    </div>
</template>

<script>
    import {NoParameter} from "../../server/api";
    import {USER_INFO} from '../../store/modules/mutation-types.js';
    import Test4 from "./Test4";

    export default {
        name: "test3",
        components: {Test4},
        methods: {
            gain() {
                NoParameter().then(data => {
                    this.$store.commit(USER_INFO, data);
                });
                //console.log("--"+this.$store.state.store.userInfo.age)
            },
            aupdateInfo() {
                let info = '我是携带的信息';
                this.$store.dispatch('asynUpUserInfo', info)
                    .then(res => {
                        console.log('异步操作完成了，执行成功回调');
                        console.log(res.msg);
                    })
                    .catch(rej => {
                        console.log('异步操作完成了，执行失败回调');
                        console.log(rej.msg);
                    })
            }
        }
    }
</script>

<style scoped>

</style>
